<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        绘制一个顶点
    </title>
</head>

<body onload="main()">
<canvas id="example" width="400" height="400" style="border: 1px solid red;"> canves</canvas>
<script src="../js/cuon-utils.js"></script>
<script src="../js/webgl-debug.js"></script>
<script src="../js/webgl-utils.js"></script>
<script>
    function main() {
        // 顶点着色器
        var VSHADER_SOURCE = 'void main() {\n' +
            ' gl_Position = vec4(0.5,-0.5,0.0,1.0);\n' + // 设置坐标
            ' gl_PointSize = 10.0;\n' +// 设置尺寸
            '}\n';
        // 片元着色器
        var FSHADER_SOURCE = 'void main() {\n' +
            ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' + // 设置颜色
            '}\n';

        var canves = document.getElementById("example");

        var gl = getWebGLContext(canves);

        // 初始化着色器
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.error("着色器加载错误")
            return;
        }

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.POINTS, 0, 1);

    }

</script>
</body>

</html>